<template>
  <!-- Messages: style can be found in dropdown.less-->
  <li class="dropdown messages-menu" :class="{open:$store.state.NavBar.dropDownMenu==='message'}">
    <a href="javascript:void(0)" class="dropdown-toggle" @click.prevent="clickMessages">
      <i class="fa fa-envelope-o"></i>
      <span class="label label-success">{{messages.length}}</span>
    </a>
    <ul class="dropdown-menu">
      <li class="header">你有{{messages.length}}条未读信息</li>
      <li>
        <ul class="menu">
          <Message v-for="message of messages"
                   :key="message.id"
                   :time="message.time"
                   :title="message.title"
                   :url="message.url"
                   :text="message.text">
          </Message>
        </ul>
      </li>
      <li class="footer"><a href="javascript:void(0)">查看所有信息</a></li>
    </ul>
  </li>
</template>

<script>
  import Message from './Message.vue'
  import {SET_NAV_DROP_DOWN} from '../../store/mutationTypes'

  let messages = [
    {id:"1", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
    {id:"2", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
    {id:"3", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
    {id:"4", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
    {id:"5", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
    {id:"6", title: "待审核信息",text:"测试任务单1等待审核",url:"javascript:void(0)", time:"2分钟前"},
  ];

  export default {
    name: "Messages",
    data() {
      return {
        messages,
        isOpen:false
      }
    },
    methods: {
      clickMessages() {
        this.$store.commit(SET_NAV_DROP_DOWN, this.$store.state.NavBar.dropDownMenu==="message"?"":"message")
      }
    },
    components:{Message}
  }
</script>



// WEBPACK FOOTER //
// Messages.vue?fab47730
